<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head xmlns:th="http://www.thymeleaf.org" th:include="master::head">
    <title>页面抽取规则配置</title>
    <style type="text/css">
        table td {
            max-width: 40px;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--<div class="col-md-4">-->
        <!--</div>-->
        <div class="col-md-12">
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <!--<button id="btn_edit" type="button" class="btn btn-default">-->
                <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改-->
                <!--</button>-->
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="tb_sites"></table>
        </div>


    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="cookieAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加cookie
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="cookieForm" th:action="@{'addCookie'}" method="post">
                        <div class="form-body">
                            <input type="hidden" id="siteId" name="siteId"/>
                            <input type="hidden" id="domain" name="domain"/>
                            <div class="form-group">
                                <label>cookie信息</label>
                                <textarea id="cookie" name="cookie" rows="10" Style="width:100%;"
                                          required="required"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button id="btnSubmit" type="button" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="siteAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="siteModalLabel">
                        添加Site
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="siteForm" th:action="@{'addSite'}" method="post">
                        <div class="form-body">

                            <div class="form-group">
                                <label class="control-label">所属域名</label>
                                <input type="text" class="form-control" name="domain"
                                       required="required"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">页面编码</label>
                                <input type="text" class="form-control" name="charset"
                                       value="utf-8" placeholder="输入页面编码"/>
                            </div>
                            <!--<div class="form-group">-->
                            <!--<label class="control-label">超时时间</label>-->
                            <!--<input type="text" class="form-control" name="timeOut"-->
                            <!--value="500" placeholder="输入超时时间(毫秒)"/>-->
                            <!--</div>-->
                            <!--<div class="form-group">-->
                            <!--<label class="control-label">重试次数</label>-->
                            <!--<input type="text" class="form-control" name="tryTimes"-->
                            <!--value="2" placeholder="输入重试次数"/>-->
                            <!--</div>-->
                            <div class="form-group">
                                <label class="control-label">请求头参数(JSON)</label>
                                <textarea name="headers" rows="3" class="form-control">
{
 "Content-Type":"application/x-www-form-urlencoded"
 }
                                </textarea>
                            </div>
                            <div class="form-group">
                                <label class="control-label">是否需要登录判断</label>
                                <input type="text" class="form-control" name="loginJudgeExpression"
                                       placeholder="用于识别登录页面"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">验证码页面判断</label>
                                <input type="text" class="form-control" name="captchaJudgeExpression"
                                       placeholder="用于识别验证码页面"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">自动登录Js脚本名</label>
                                <input type="text" class="form-control" name="loginJsFileName"
                                       placeholder="输入'根目录/casperjs/js'中的文件名"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">验证码识别脚本名</label>
                                <input type="text" class="form-control" name="captchaJsFileName"
                                       placeholder="输入'根目录/casperjs/js'中的文件名"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">浏览器标识</label>
                                <textarea name="userAgent" rows="3" class="form-control"
                                          value="">Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36</textarea>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button id="btnSiteSubmit" type="button" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <div th:include="master::itemDel"></div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $("#btnSubmit").click(function () {
            $("#cookieForm").ajaxSubmit({
                success: function (data) {
                    $('#cookieAddModal').modal('hide');
                    $('#tb_sites').bootstrapTable('refresh');
                }
            });
        });
        $("#btnSiteSubmit").click(function () {

            $("#siteForm").ajaxSubmit({
                success: function (data) {
                    $('#siteAddModal').modal('hide');
                    $('#tb_sites').bootstrapTable('refresh');
                }
            });
        });

        $("#btn_add").click(function () {
            $('#siteAddModal').modal({
                keyboard: false
            });
        });
        $("#btn_delete").click(function () {
            delItem(function () {
                var selectedRows = $('#tb_sites').bootstrapTable('getSelections');
                var selectedIds = [];
                $.each(selectedRows, function (i, item) {
                    selectedIds.push(item.id);
                });
                if (selectedIds.length == 0) return false;

                $.ajax({
                    type: "Post",
                    cache: false,
                    contentType: "application/json",
                    url: global.contextPath + "/deleteSites",
                    data: JSON.stringify(selectedIds),
                    dataType: 'json',
                    success: function (result) {     //回调函数，result，返回值
                        if (result == true)
                            $('#tb_sites').bootstrapTable('refresh');
                        else
                            alert("删除失败");
                    },
                    error: function (msg) {
                        alert(JSON.stringify(msg));
                    }
                });
            });
        });

        //1.初始化Table
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#tb_sites').bootstrapTable($.extend(global.bootstrapTableOptions, {
                    url: global.contextPath + '/queryPageSites',         //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'domain',
                        title: '所属域名'
                    }, {
                        field: 'charset',
                        title: '编码'
                    }, {
                        field: 'loginJudgeExpression',
                        title: '是否需要登录判断'
                    }, {
                        field: 'loginJsFileName',
                        title: '自动登录Js脚本名'
                    },
                        {
                            field: 'captchaJudgeExpression',
                            title: '验证码页面判断'
                        }, {
                            field: 'captchaJsFileName',
                            title: '验证码识别脚本名'
                        },
                        {
                            field: 'headers',
                            title: '请求头'
                        },
//                        {
//                            field: 'userAgent',
//                            title: '浏览器标识'
//                        },
                        {
                            field: 'action',
                            title: '操作',
                            formatter: oTableInit.actionFormatter,
                            events: oTableInit.actionEvents
                        }
                    ],
                    //注册加载子表的事件。注意下这里的三个参数！
                    onExpandRow: function (index, row, $detail) {
                        var cookieList = row.cookieList;
                        if (!cookieList || cookieList.length == 0) return;
                        var cur_table = $detail.html('<table></table>').find('table');
                        $(cur_table).bootstrapTable({
                            clickToSelect: false,
                            undefinedText: "",
                            escape: true,
                            detailView: false,//父子表
                            data: cookieList,
                            uniqueId: "id",
                            pagination: false,
                            striped: true,
                            search: false,
                            columns: [
                                {
                                    field: 'cookie',
                                    title: '内容'
                                },
                                {
                                    field: 'available',
                                    title: '是否可用'
                                },
                                {
                                    field: 'lastUpdatedDate',
                                    title: '最后刷新时间',
                                    formatter: function (value, row, index) {
                                        var timestamp = value;
                                        var d = new Date(timestamp);    //根据时间戳生成的时间对象
                                        var date = (d.getFullYear()) + "-" +
                                                (d.getMonth() + 1) + "-" +
                                                (d.getDate()) + " " +
                                                (d.getHours()) + ":" +
                                                (d.getMinutes()) + ":" +
                                                (d.getSeconds());
                                        return date;
                                    }
                                },
                                {
                                    field: 'action',
                                    title: '操作',
                                    formatter: function (value, row, index) {
                                        return [
                                            '<a  href="javascript:void(0)" class="deleteCookie btn btn-sm red" title="删除Cookie">',
                                            '<i class="fa fa-times">删除Cookie</i>',
                                            '</a>'
                                        ].join('');
                                    },
                                    events: {
                                        'click .deleteCookie': function (e, value, row, index) {
                                            delItem(function () {
                                                var selectedIds = [];
                                                selectedIds.push(row.id);
                                                $.ajax({
                                                    type: "Post",
                                                    cache: false,
                                                    contentType: "application/json",
                                                    url: global.contextPath + "/deleteCookieByIds",
                                                    data: JSON.stringify(selectedIds),
                                                    dataType: 'json',
                                                    success: function (result) {     //回调函数，result，返回值
                                                        if (result == true)
                                                            $('#tb_sites').bootstrapTable('refresh');
                                                        else
                                                            alert("删除失败");
                                                    },
                                                    error: function (msg) {
                                                        alert(JSON.stringify(msg));
                                                    }
                                                });
                                            });

                                        }
                                    }
                                }
                            ]
                        });
                    }
                }));
            };

            oTableInit.actionFormatter = function (value, row, index) {
                return [
                    '<a  href="javascript:void(0)" class="addCookie btn btn-sm green" title="添加cookie">',
                    '<i class="fa fa-plus">添加cookie</i>',
                    '</a>'
                ].join('');
            };
            oTableInit.actionEvents = {
                'click .addCookie': function (e, value, row, index) {
                    $("#cookieForm #siteId").val(row.id);
                    $("#cookieForm #domain").val(row.domain);
                    $('#cookieAddModal').modal({
                        keyboard: false
                    });
                }
            };
            return oTableInit;
        };
        var oTable = new TableInit();
        oTable.Init();
    });
    /*]]>*/
</script>

</body>
</html>